<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>allocate</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="/js/bootstrap.bundle.js"></script>
    <script src="/js/transmitdata.js"></script>
    <style>
         body {
            margin: 0;
            display: flex;
            flex-direction: row; /* 水平排列 */
            height: 100vh; /* 设置 body 的高度为视口高度 */
        }
       .list{
        height: 100vh;
        width: 10vw;
        padding: 0 3vw;
       }
       ul {
            list-style: none;
            padding: 0;
        }
        
        li {
            border-bottom: 1px solid #ccc; /* 添加边框线 */
            padding: 8px;
        }
        
        /* 第二个列表项的样式 */
        .bold {
            background-color: lightblue; /* 背景色 */
            font-weight: bold; /* 加粗 */
            cursor: pointer; /* 鼠标指针样式 */
        }
    </style>
</head>
<body>
    <button style="background-image: url(/photo/reMenu.png);background-position: center;height: 4vh;width: 4vh; background-repeat: no-repeat;background-size: cover;" onclick="formSubmit(`get`,`/menu/reMenu`,null);"></button>
    <div th:each="entry : ${rootStack}" class="list">
        <!-- entry.key 是Map的键 -->
        <span th:text="${entry.key}"></span>:
        
        <!-- entry.value 是Map的值（列表）-->
        <ul>
            <li th:each="entry, iterStat : ${entry.value}" 
            th:text="${entry}" 
            th:class="${iterStat.index == 1} ? 'bold' : ''"
            th:attr="onclick=${iterStat.index == 1} ? 'handleClick(' + ${entry} + ')' : ''">
        </li>
        </ul>
    </div>
   <script>
   function handleClick(number)
   {
    var map={}
    map['blockNumber']=number;
    formSubmit('post',"/menu/showAllocateRootStackNext",map);
   }
   </script>

</body>
</html>